<template>
  <div class="fwxx">
    <el-form ref="form" :rules="rules" :model="form" label-width="140px">
      <el-form-item label="服务名称" prop="jkmc">
        <el-input v-model="form.jkmc" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="服务图标" prop="jktb">
        <div class="fwdesig">
          <div @click="changeFile" class="bt" v-if="!form.jktb">
            <img :src="requireUrl" alt />
          </div>
          <img
            class="bt"
            @click="changeFile"
            v-else
            :src="baseUrl + '/fpi/wjfw/download?wjbh=' + form.jktb"
            alt
          />
          <div v-if="form.jktb" class="clear" @click="clearImg">×</div>
          <el-radio-group
            v-if="!form.jktb"
            style="margin-left:40px"
            v-model="form.nntb"
            @change="shapeClick"
          >
            <el-radio :label="1">
              <img src="~@/assets/img/grzx/形状 887.png" alt />
            </el-radio>
            <el-radio :label="2">
              <img src="~@/assets/img/grzx/形状 888.png" alt />
            </el-radio>
            <el-radio :label="3">
              <img src="~@/assets/img/grzx/形状 889.png" alt />
            </el-radio>
            <el-radio :label="4">
              <img src="~@/assets/img/grzx/形状 890.png" alt />
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="服务概述" prop="jkms">
        <el-input
          type="textarea"
          :rows="4"
          resize="none"
          v-model="form.jkms"
          maxlength="1000"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="服务原始地址" prop="jkdz">
        <el-input v-model="form.jkdz" maxlength="3000" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="对外暴露API路径" prop="bldz">
        <el-input v-model="form.bldz" maxlength="100" show-word-limit>
          <template slot="prepend">/jkyq/</template>
        </el-input>
      </el-form-item>
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item style="width:100%" label="协议" prop="qqxy">
            <el-select style="width:100%" v-model="form.qqxy">
              <el-option v-for="item in xyList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="请求方式" prop="qqfs">
            <el-select style="width:100%" v-model="form.qqfs">
              <el-option v-for="item in qqfsList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="返回格式" prop="ffgs">
            <el-select style="width:100%" v-model="form.ffgs">
              <el-option v-for="item in fhgsList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="width:100%" label="消息中间件">
        <el-radio-group style="margin-top:2px" v-model="form.xxzjj" @change="xxzjjChange">
          <el-radio label="KAFKA">KAFKA</el-radio>
          <el-radio label="ROCKETMQ">ROCKETMQ</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row :gutter="5" v-if="form.xxzjj === 'KAFKA'">
        <el-col :span="8">
          <el-form-item style="width:100%" label="brokerId">
            <el-input v-model="form.brokerId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="logDirs">
            <el-input v-model="form.logDirs"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="port">
            <el-input v-model="form.port"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5" v-if="form.xxzjj === 'ROCKETMQ'">
        <el-col :span="8">
          <el-form-item style="width:100%" label="rocketmqHome">
            <el-input v-model="form.rocketmqHome"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="namesrvAddr">
            <el-input v-model="form.namesrvAddr"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="width:100%" label="kvConfigpath">
            <el-input v-model="form.kvConfigpath"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item style="width:100%" label="消息中间件"></el-form-item> -->
    </el-form>

    <input style="display: none" type="file" @change="uploadFile" ref="file" />
  </div>
</template>
<script>
import wjfwService from '@/api/wjfw'
// import urlJbg from ''
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      const pattern = /^[/a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('请输入对外暴露API路径'))
      } else if (!pattern.test(value)) {
        callback(new Error('只能输入字母以及数字'))
      } else {
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      const pattern =
        /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
      if (value === '') {
        callback(new Error('请输入服务原始地址'))
      } else if (!pattern.test(value)) {
        callback(new Error('请输入正确的地址'))
      } else {
        callback()
      }
    }
    return {
      xyList: ['HTTP', 'HTTPS'],
      qqfsList: ['POST', 'GET'],
      fhgsList: ['JSON', 'XML'],
      form: {
        jktb: '',
        xxzjj: 'KAFKA',
        xxzjjcs: '',
        brokerId: '',
        logDirs: '',
        port: '',
        rocketmqHome: '',
        namesrvAddr: '',
        kvConfigpath: '',
        nntb: 0,
      },
      baseUrl: window.BASEURL,
      rules: {
        jkmc: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        jkms: [{ required: true, message: '请输入服务概述', trigger: 'blur' }],
        jkdz: [{ required: true, validator: validatePass1, trigger: 'blur' }],
        bldz: [{ required: true, validator: validatePass, trigger: 'blur' }],
        qqxy: [{ required: true, message: '请选择协议', trigger: 'change' }],
        qqfs: [
          { required: true, message: '请选择请求方式', trigger: 'change' }
        ],
        ffgs: [{ required: true, message: '请选择返回格式', trigger: 'change' }]
      },
      requireUrl: require('@/assets/img/grzx/sc.png'),
      getImgUrl: require('@/assets/img/grzx/形状 887.png'),
    }
  },
  mounted() {
    //
  },
  methods: {
    /* 上传文件 */
    changeFile() {
      this.$refs.file.multiple = false
      this.$refs.file.accept = '.png,.jpg'
      this.$refs.file.click()
    },
    /* 上传文件 */
    uploadFile(e) {
      const file = e.target.files[0];
      console.log(file, 'file');
      if (
        !file.name.indexOf('.png') ||
        !file.name.indexOf('.jpg') ||
        !file.name.indexOf('.PNG') ||
        !file.name.indexOf('.JPG')
      ) {
        this.$message.warning('只能上传图片')
        this.$refs.file.value = ''
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('wjmc', file.name)
      wjfwService
        .upload(formData)
        .then(res => {
          this.$refs.file.value = ''
          this.form.jktb = res.wjbh
          this.$message.success('上传成功')
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 验证信息
     */
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(el => {
          if (el) {
            this.form.xxzjjcs = JSON.stringify({
              brokerId: this.form.brokerId,
              logDirs: this.form.logDirs,
              port: this.form.port,
              rocketmqHome: this.form.rocketmqHome,
              namesrvAddr: this.form.namesrvAddr,
              kvConfigpath: this.form.kvConfigpath
            })
            resolve(this.form)
          } else {
            reject()
          }
        })
      })
    },
    shapeClick(val) {
      if (val === 1) {
        this.getImgUrl = require('@/assets/img/grzx/形状 887.png');
        let file = this.base64(this.getImgUrl, '形状 887')
        this.getUpload(file)
      } else if (val === 2) {
        this.getImgUrl = require('@/assets/img/grzx/形状 888.png');
        let file = this.base64(this.getImgUrl, '形状 888')
        this.getUpload(file)
      } else if (val === 3) {
        this.getImgUrl = require('@/assets/img/grzx/形状 889.png');
        let file = this.base64(this.getImgUrl, '形状 889')
        this.getUpload(file)
      } else if (val === 4) {
        this.getImgUrl = require('@/assets/img/grzx/形状 890.png');
        let file = this.base64(this.getImgUrl, '形状 890')
        this.getUpload(file)
      }
    },
    base64(url, name) {
      return this.base64ToFile(url, name);
    },
    base64ToFile(base64, fileName) {
      let arr = base64.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]);
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], fileName, { type: mime });  // 将值抛出去
    },
    getUpload(file) {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('wjmc', file.name)
      wjfwService
        .upload(formData)
        .then(res => {
          this.$refs.file.value = ''
          this.form.jktb = res.wjbh
          this.$message.success('上传成功')
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    // 点击清楚图片
    clearImg() {
      this.$refs.file.value = ''
      this.form.jktb = ''
    },
    xxzjjChange(val) {
      if (val === 'KAFKA') {
        this.form.rocketmqHome = '';
        this.form.namesrvAddr = '';
        this.form.kvConfigpath = '';
      } else {
        this.form.brokerId = '';
        this.form.logDirs = '';
        this.form.port = '';
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fwxx {
  width: 100%;
  margin-top: 20px;
  .fwdesig {
    display: flex;
    align-items: center;
    position: relative;
    .bt {
      width: 104px;
      height: 60px;
      border: 1px solid #cecece;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .clear {
      position: absolute;
      left: 90px;
      top: -12px;
      cursor: pointer;
      color: #cecece;
    }
    img {
      cursor: pointer;
    }
  }
}
</style>
